<template>
    <div class="login">
        <div class="logo">
            <img alt="" src="../assets/logo.png"/>
           
        </div>
        <ul class="login-list">
            <li>
                <input type="text" placeholder="请输入手机号"/>
                
                <i class="icon icon-person">
                </i>
            </li>
            <li>
                <input type="text" placeholder="请输入图片验证码"/>
                
                <i class="icon icon-char">
                </i>
                <img src="../assets/yzm.png" alt="" class="yzm"/>
            </li>
             <li>
                <input type="text" placeholder="请输入短信验证码"/>
                <i class="icon icon-number">
                </i>
                <button @click='getnumber' :disabled="disabled" :class="{'bgcolor':bgcolor}">
                	{{yzm}}
                </button>
            </li>
        </ul>
        <div class="btn-login">
        	<button :class="{'active':loginActive}" @click="showLayer">
	        	登录
	        </button>
        </div>
       
	    <div class="layer" :class="{'islayershow':islayershow}">
	    	请输入手机号
	    </div>
        
    </div>
</template>
<script>
import { Toast} from 'vux'
	export default{
		 components: {
		   Toast
		  },
		data(){
			return{
				yzm:'获取验证码',
				disabled:false,
				num:30,
				loginActive:false,
				position: 'default',
      			islayershow: false,
      			bgcolor:false
			}
		},
		methods:{
			// 获取验证码
			getnumber(){
				this.disabled=true
				this.bgcolor=true
				this.loginActive=true
				this.yzm=this.num + '（S）'
	   			var that=this
	            var timer = setInterval(function() {
	               that.num--;
	               that.yzm=that.num + '（S）'
	                if (that.num == 0) {
	                    clearInterval(timer);
	                    that.num=30
	                    that.yzm='获取验证码'
	                    that.disabled=false
	                    that.bgcolor=false
	                } else {
	                    that.disabled=true

	                    that.yzm=that.num + '（S）'
	                }
	            }, 1000)
	  
			},
			// 提示信息
			 showLayer () {
		     	this.islayershow=true;
		     	var that=this;
		     	setTimeout(function(){
					that.islayershow=false;
		     	},2000)
		    },
		}
	}
</script>
<style lang="sass">
	@import '../style/login'
</style>